<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2-show-if</title>
		<script src="vue/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			{{age}}岁
			<p v-show="age>=18">成年</p>
			<p v-show="age<18">未成年</p>
			<p v-if="age>=18">成年</p>
			<p v-if="age<18">未成年</p>
			<p v-if="salary<=10">普通阶层</p>
			<p v-else-if="salary<500">中产阶级</p>
			<p v-else="salary>=500">富豪</p>
			<p v-for="o in hobby">{{o}}</p>
			<p v-for="o,index in hobby">{{index}}-{{o}}</p>
			<button v-on:click="show()">展示</button>
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				age: 40,
				salary: 1000,
				hobby: ["唱歌", "跳舞", "下象棋"],
			},
			methods: {
				show: function() {
					console.log("show method");
				}
			}
		});
	</script>

</html>
